<template>
  <div>
    <echartsBh />
    <echartsFx />
    <echartsQk />
    <echartsTb />
    <!-- <div>
      <Row class="header" type="flex" justify="start">
        <Col span="24">
          <Icon class="icon" type="ios-podium-outline"/>
          <span class="title">性别年龄分析</span>
        </Col>
      </Row>
      <br>
      <div id="ageSumBarEchart" :style="{ width: width + 'px', height: height + 'px'}"></div>
    </div> -->
  </div>
</template>

<script>
import echarts from 'echarts'
import  echartsBh from './components/echartsBh.vue'
import  echartsFx from './components/echartsFx.vue'
import  echartsQk from './components/echartsQk.vue'
import  echartsTb from './components/echartsTb.vue'
export default {
  name: 'AgeSumBarEchart',
  components:{
    echartsBh,
    echartsFx,
    echartsQk,
    echartsTb
  },
  data () {
    return {
      chartData: [120, 200, 150, 80, 70, 110, 130]
    }
  },
  props: {
    width: {
      type: Number,
      default: () => {
        return 500
      }
    },
    height: {
      type: Number,
      default: () => {
        return 300
      }
    }
  },
  mounted () {
    this.chart()
  },
  methods: {
    chart (data) {
      // this.chartData = data
      let option  = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: '10%',
    left: '10%',
    right: '10%',
    bottom: '10%',
    containLabel: true
  },
  xAxis: {   // x轴
    show: false,
    axisLabel: {
      formatter: '{value} 位',
      show: true
    },
    splitLine: { show: false },
    axisLine: {
      show: true
    }
  },
  yAxis: {
    type: 'category',
    inverse: true, // 倒叙
    axisLabel: {
      color: '#1E90FF',
      formatter: (val) => {
        return `${val}`;
      }
    },
    axisLine: {
      show: false // 轴线
    },
    axisTick: {
      show: false // 刻度线
    },
    data: ['18-29', '20-39', '40-59', '60-79', '80以上']
  },
  series: [
  {  //柱形图顶端带字体
      name: 'Expenses',   
      type: 'bar',
      stack: 'Total',
      label: {
        show: true,
        position: 'left'
      },
      emphasis: {
        focus: 'series'
      },
      data: [-120, -132, -101, -134, -190, -230, -210]
    },
    // {
    //   name: 'Echarts',
    //   type: 'bar',
    //   barWidth: 10,
    //   showBackground: true,
    //   barMaxWidth: 20,
    //   barMinWidth: 5,
    //   itemStyle: {
    //     borderRadius: [0, 10, 10, 0],
    //     color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
    //       { offset: 0, color: 'rgba(183, 75, 238)' },
    //       { offset: 1, color: 'rgba(50, 229, 255, 1)' }
    //     ]),
    //     borderWidth: 1,
    //     borderColor: "black"
    //   },
    //   data: [100, 200, 300, 400, 500]
    // }
  ]
};

      this.chartData.forEach(item => {
        // area为空的是之前导入的数据（暂不显示）
        if (item.age) {
          option.dataset.source.push(item)
        }
      })
      let myChart = echarts.init(document.getElementById('ageSumBarEchart')) //生成了一个echarts实例
      myChart.setOption(option)
      // console.log(option)
    }
  }
}
</script>

<style scoped>
  .header {
    height: 30px;
  }

  .icon {
    font-size: 28px;
    font-weight: 600;
    margin-right: 5px;
  }

  .title {
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
  }
</style>
